import React from 'react';
import { Form, Input, InputNumber, Button, message,  Modal } from 'antd';
import {
    ExclamationCircleOutlined,
} from '@ant-design/icons';
import { connect } from 'umi';
import { DeptSelect } from '@/components/FormItemSelect';

const { confirm } = Modal;

class DeptEdit extends React.Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            loading: false,
            datas: {},
            pnode: {}
        }
    }
    formRef: any = React.createRef();
    componentDidMount() {
        this.props.onRef(this)
        // this.props.dispatch({
        //     type: 'Department/getAll',
        // });
    }
    componentDidUpdate() {

    }
    getData = (node: any) => {
        const { dispatch } = this.props;
        if (node.key > 0) {
            dispatch({
                type: 'Abp/get',
                payload: { id: node.key },
                control: 'Department',
            }).then(() => {
                var result = this.props.response.result;
                this.setState({ datas: result });
                this.formRef.current.setFieldsValue({ department: result });
            });
        }
    }
    onFinish = (values: any) => {
        var act = "Abp/create";
        if (values.department.id > 0) {
            act = "Abp/update";
        }
        this.props.dispatch({
            type: act,
            payload: values.department,
            control: 'Department',
        }).then(() => {
            var resp = this.props.response;
            if (resp.success) {
                message.success('更新成功！');
                this.props.refresh();
            }
            else {
                message.error('更新错误，请联系管理员');
            }
        });
    };
    ResetForm = () => {
        var data = {
            id: 0,
        }
        this.setState({ datas: data });
        this.formRef.current.resetFields();
    }
    handleDel = () => {
        this.props.dispatch({
            type: "Abp/delete",
            payload: { Id: this.state.datas.id },//this.props.response.id
            control: 'Department',
        }).then(() => {
            var resp = this.props.response;
            if (resp.success) {
                message.success('删除成功！');
                this.props.refresh();
                this.formRef.current.resetFields();
            }
            else {
                message.error('删除错误，请联系管理员！');
            }
        })
    }
    showConfirm = () => {
        var _this = this;
        confirm({
            title: '警告',
            icon: <ExclamationCircleOutlined />,
            content: '删除后将不可恢复，确定删除？',
            onOk() {
                _this.handleDel();
            },
            onCancel() { },
        });
    }
    render() {
        const layout = {
            labelCol: { span: 6 },
            wrapperCol: { span: 10 },
        };
        const { datas } = this.state;
        return (
            <div>
                <Form {...layout} ref={this.formRef} onFinish={this.onFinish} >
                    <DeptSelect width={200} idValue name={['department', 'parentId']} placeholder="请选择部门" label="所属部门" />
                    <Form.Item
                        hidden
                        label="depth"
                        name={['department', 'depth']}>
                        <Input />
                    </Form.Item>
                    <Form.Item
                        hidden
                        label="id"
                        name={['department', 'id']}>
                        <Input />
                    </Form.Item>
                    <Form.Item
                        name={['department', 'deptName']}
                        label="部门名称"
                        rules={[{ required: true, message: "请输入部门名称" }]}>
                        <Input />
                    </Form.Item>
                    <Form.Item
                        name={['department', 'deptIndex']}
                        label="部门代号"
                        rules={[{ required: true, message: "请输入部门代号" }]}>
                        <Input />
                    </Form.Item>
                    <Form.Item
                        name={['department', 'orderId']}
                        label="序号"
                        rules={[{ type: 'number', min: 0, max: 9999 }]}>
                        <InputNumber />
                    </Form.Item>

                    <Form.Item name={['department', 'commentText']} label="部门职能">
                        <Input.TextArea />
                    </Form.Item>
                    <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 6 }}>
                        <Button
                            type="primary"
                            htmlType="submit"
                            loading={this.state.loading}
                        >确定</Button>
                        <Button onClick={this.ResetForm} style={{ marginLeft: 10 }}>重设</Button>
                        <Button danger
                            onClick={this.showConfirm}
                            disabled={datas.id == 0 || !datas.id}
                            style={{ marginLeft: 10 }}>删除</Button>
                    </Form.Item>
                </Form>
            </div>
        )
    }
}
export default connect(({ Abp }: API.IConnectState) => ({
    response: Abp.response,
    currentUser: Abp.currentUser,
}))(DeptEdit);